<template>
	<div class="login">
		<div class="main">
			<div class="title">
				<span class="text">登录</span>
				<span
					class="trans"
					@click="mode = mode === 'username' ? 'mobile' : 'username'"
					>使用{{ mode === 'username' ? '短信' : '密码' }}登录
					<i class="el-icon-arrow-right"></i>
				</span>
			</div>
			<template v-if="mode === 'username'">
				<div class="line">
					<div class="input-box" :class="{ 'input-box--white': namefocus }">
						<input
							v-model="username"
							class="input"
							type="text"
							placeholder="用户名"
							@focus="namefocus = true"
							@blur="namefocus = false"
						/>
					</div>
				</div>
				<div class="line">
					<div class="input-box" :class="{ 'input-box--white': pswdfocus }">
						<input
							v-model="password"
							class="input"
							type="password"
							placeholder="密码"
							@focus="pswdfocus = true"
							@blur="pswdfocus = false"
							style="font-family: Arial"
						/>
					</div>
				</div>
			</template>
			<template v-if="mode === 'mobile'">
				<div class="line">
					<div class="input-box" :class="{ 'input-box--white': namefocus }">
						<input
							v-model="mobile"
							class="input"
							type="text"
							placeholder="您投保使用的手机号"
							@focus="namefocus = true"
							@blur="namefocus = false"
							autocomplete="new-password"
						/>
					</div>
				</div>
				<div class="line" style="grid-template-columns: 1fr 85px">
					<div class="input-box" :class="{ 'input-box--white': pswdfocus }">
						<input
							v-model="code"
							class="input"
							type="text"
							placeholder="手机验证码"
							@focus="pswdfocus = true"
							@blur="pswdfocus = false"
							autocomplete="new-password"
							style="font-family: Arial"
						/>
					</div>
					<div class="verify-btn" @click="sendCode">
						<span v-if="sending">
							<i class="el-icon-loading"></i>
						</span>
						<span v-else>
							{{ second ? second + 's' : '发送验证码' }}
						</span>
					</div>
				</div>
			</template>

			<div class="button" @click="login">
				点击登录
				<i class="el-icon-loading" v-if="loading"></i>
			</div>
		</div>
	</div>
</template>

<script>
import * as REGEXP from '@/const/REGEXP'
import waitSecond from '@/utils/wait-second.js'
import { sendLoginSMS, doLogin, doSMSLogin } from '@/api/login'
export default {
	data() {
		return {
			mode: 'mobile',
			namefocus: false,
			pswdfocus: false,

			mobile: '',
			username: '',
			password: '',
			code: '',

			second: 0, // 验证码等待读秒
			sending: false, // 验证码发送中

			loading: false // 登录
		}
	},
	computed: {},
	mounted() {
		const second = localStorage.getItem('verify-second')
		if (second) {
			this.second = Number(second)
			this.wait(second)
		}
	},
	methods: {
		sendCode() {
			if (this.second || this.sending) return
			if (!REGEXP.telphone.test(this.mobile)) {
				this.$message.error('请输入正确的手机号')
				return
			}
			this.sending = true
			sendLoginSMS({ mobile: this.mobile })
				.then(() => this.wait(59))
				.finally(() => {
					this.sending = false
				})
		},
		wait(second) {
			waitSecond({
				second,
				onPro: (second) => {
					this.second = second
					localStorage.setItem('verify-second', second)
				},
				onEnd: () => {
					this.second = 0
					localStorage.removeItem('verify-second')
				}
			})
		},
		login() {
			if (this.loading) return

			let promise
			if (this.mode === 'mobile') {
				// 手机登录
				if (!REGEXP.telphone.test(this.mobile)) {
					this.$message.error('请输入正确的手机号')
					return
				}
				if (!this.code) {
					this.$message.error('请输入验证码')
					return
				}
				this.loading = true
				promise = doSMSLogin({
					mobile: this.mobile,
					code: this.code
				})
			} else {
				if (!this.username) {
					this.$message.error('请输入用户名')
					return
				}
				if (!this.password) {
					this.$message.error('请输入密码')
					return
				}
				this.loading = true
				promise = doLogin({
					username: this.username,
					password: this.password
				})
			}

			promise
				.then(() => {
					this.$router.push({
						path: '/order/list'
					})
				})
				.finally(() => {
					this.loading = false
				})
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.login {
	@include absCover;
	position: fixed;
	z-index: 1;
	background-image: url(@/assets/computer.jpg);
	background-size: cover;
	background-position: center;
}

.main {
	width: 320px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.3);
}

.title {
	padding: 50px 30px 10px 35px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
	span.text {
		color: #fff;
		font-size: 20px;
		letter-spacing: 3px;
	}
	span.trans {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.6);
		cursor: pointer;
	}
}

.line {
	display: grid;
	align-items: center;
	margin: 12px 32px;
	gap: 8px;
}

.input-box {
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.15);
	height: 45px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	padding-right: 5px;

	&--white {
		background-color: rgba(255, 255, 255, 0.4) !important;
		.input {
			color: #000 !important;
		}
	}

	.input {
		display: block;
		width: 100%;
		background-color: transparent;
		transition: background-color 9999999s 9999999s;
		outline: none;
		border: none;
		line-height: 45px;
		padding: 0 15px;
		font-size: 16px;
		color: #fff;
		font-family: 'Noto Sans SC';
	}
}

.verify-btn {
	border: 2px solid rgba(255, 255, 255, 0.8);
	color: #fff;
	background-color: rgba(177, 87, 23, 0.5);
	font-size: 13px;
	text-align: center;
	line-height: 33px;
	letter-spacing: 0;
	padding: 0 5px;
	white-space: nowrap;
	cursor: pointer;
}

.input::placeholder {
	color: #ccc;
	font-family: 'Noto Sans SC';
}
.input:-webkit-autofill {
	color: #fff;
}

.button {
	line-height: 39px;
	text-align: center;
	font-size: 16px;
	background-color: #b15717;
	margin: 30px 32px 32px;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	user-select: none;
	border-radius: 8px;
	// box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.15) inset;
	border: 2px solid rgba(255, 255, 255, 0.1);
	&:active {
		box-shadow: none;
	}
}
</style>
